<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			table {
				border: 1px solid black;
			}
			
			table {
				width: 100%;
			}
			
			th {
				height: 50px;
			}
			
			th,
			td {
				border-bottom: 1px solid #ddd;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<table>
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>购买数量</td>
					<td>操作</td>
				</tr>
				<tr v-for="iphone in goods">
					<td>{{ iphone.id }}</td>
					<td>{{ iphone.name }}</td>
					<td>{{ iphone.price }}</td>
					<td>
						<button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button> {{ iphone.count }}
						<button v-on:click="iphone.count+=1">+</button>
					</td>
					<td>
						<button v-on:click="iphone.count=0">移除</button>
					</td>
				</tr>
			</table>
			总价：${{totalPrice()}}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					goods: [{
							id: 1,
							name: 'iphone 13',
							price: 5099,
							count: 1
						},
						{
							id: 2,
							name: '华为P30',
							price: 8699,
							count: 1
						},
						{
							id: 3,
							name: 'OPPO R14',
							price: 6499,
							count: 1
						}
					]

				},
				methods: {
					totalPrice: function() {
						var totalP = 0;
						for(var i = 0, len = this.goods.length; i < len; i++) {
							totalP += this.goods[i].price * this.goods[i].count;
						}
						return totalP;
					}

				}
			})
		</script>
	</body>

</html>